<template>
	<div class="g-bg">
	    <div class="g-polygon g-polygon-1"></div>
	    <div class="g-polygon g-polygon-2"></div>
	    <div class="g-polygon g-polygon-3"></div>
	</div>
	
	<div class="root flex">
		<div class="c2">
			<div class="c3">{{$l('后台管理','page.t1')}}</div>
			<div class="c4">{{$l('欢迎进入后台管理系统','page.t2')}}</div>
			<div class="c5">
				<div class="c6">
					<el-input :placeholder="$l('请输入账号','form.t4')" :prefix-icon="User" :clearable="true"  size="large"
						v-model.trim="formData.user">
					</el-input>
				</div>
				<div class="c6">
					<el-input :placeholder="$l('请输入密码','form.t5')" type="password" :show-password="true"  size="large" :clearable="true"
						:prefix-icon="Key" v-model.trim="formData.pass">
					</el-input>
				</div>
				
				<div class="c6 flex">
					<el-input
						:placeholder="$l('请输入验证码','form.t6')"
						:clearable="true"
						size="large"
						:prefix-icon="CollectionTag"
						v-model.trim="formData.code">
					</el-input>
					<div class="c10">
						<img :src="yzmImg" alt="" @click="shuaxinYzm">
					</div>
				</div>
				<el-button  size="large" type="primary" class="c7" @click="subLogin">
					{{$l('登录','form.t7')}}
				</el-button>
			</div>
		</div>
		
		<div class="c9 left">
			<lang placement="bottom"></lang>
		</div>
		
		<div class="c9 right">
			<el-switch style="margin-left: 24px" v-model="isDark" inline-prompt active-text="黑" inactive-text="白" />
		</div>
	</div>
	<div class="c8"><a href="http://www.88an.top">www.88an.top</a></div>
</template>

<script setup>
	import lang from "@/components/lang.vue"
	import md5 from 'js-md5';

	import { User,Key,CollectionTag } from '@element-plus/icons'
	const router = useRouter()

	import publicJS from "@/hook/public.js";
    const {config,api,ElMessage} = publicJS();

	let yzmImg = ref('');
	const shuaxinYzm = ()=>{
		api.post('a/login/verify').then(res=>{
			yzmImg.value = config.baseUrl+res.src;
		})
		// yzmImg.value = 'http://tp6/a/login/verify?'+Math.random();
	}
	shuaxinYzm();
	
	
	import { useDark, useToggle } from '@vueuse/core'
	const isDark = useDark()
	
	import useThemeColor from "@/hook/useThemeColor.js";
	useThemeColor();

	// const toggleDark = useToggle(isDark)
	
	// api.get('a/index/getConfig', {
	// 	type: 1
	// }).then(res => {
	// 	console.log(res)
	// }).catch(err => {
	// 	console.log(err);
	// })

	// api.post('a/index/getConfig').then(res => {
	// 	console.log(res)
	// }).catch(err => {
	// 	console.log(err);
	// })
	const formData = reactive({
		user: '',
		pass: '',
		code: ''
	});
	const subLogin = () => {
		if(formData.user == '') return ElMessage.error('请输入账号')
		if(formData.pass == '') return ElMessage.error('请输入密码')
		if(formData.code == '') return ElMessage.error('请输入验证码')
		api.post('a/Login/loginAdmin',formData).then(res => {
			if(res.code == 200){
				localStorage.setItem("login", JSON.stringify(res.data));
				router.push('/')
			}else if(res.code == 201){
				shuaxinYzm();
				ElMessage.error(res.msg)
			}else{
				ElMessage.error(res.msg)
			}
		})
	}
</script>
<style lang="scss" scoped>
	.g-polygon {
	    position: absolute;top: 50vh; left: 0; bottom: 0; right: 0;opacity: .5;
	}
	.g-polygon-1 {
	    background: #ffee55;
	    clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
	}
	
	.g-polygon-2 {
	    background: #E950D1;
	    clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
	}
	
	.g-polygon-3 {
	    background: rgba(87, 80, 233);
	    clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
	}
	.g-bg::before {
		content: "";
		position: fixed;
		top: 0; left: 0; bottom: 0; right: 0;
		backdrop-filter: blur(150px);
		z-index: 1;
	}
	
	.root{
		position: relative;z-index: 9;background: none;flex-direction:column;height: calc(100vh - 50px);justify-content: center;background: none;box-shadow:none;
		.c2{width:330px;text-align: center;margin-top: -20vh;}
		.c3{margin-bottom: 10px;font-weight: 300;font-size: 30px;color: #000;text-align: center;}
		.c4{font-weight: 300;color: #999;}
		.c5{margin-top: 20px;}
		.c6{margin: 10px auto;}
		.c7{width: 100%;}
		.c9{position: fixed;top:10px;}
		.c9.left{left: 10px;}
		.c9.right{right: 10px;}
		.c10{width: 200px;margin-left: 10px;}
		.c10 img{width: 100%;cursor: pointer;display:block;}
	}
	.c8{text-align: center;z-index: 9;position: relative;}
	.c8 a{color: #555;font-size: 15px;}
	html.dark {
		.root{
			background: none;box-shadow:none;
			.c3{color: #fff;}
		}
	}
</style>